<script>
import ChartResizeListener from '@/mixins/chart-resize-listener'
import GlobalFilterListener from './GlobalFilterListener.vue'
export default {
  name: 'real-time-data-viewing',
  mixins: [ChartResizeListener, GlobalFilterListener],
  props: {
    showIcon: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '全年综合能耗累积图'
    },
    showSecondaryTitle: {
      type: Boolean,
      default: true,
    },
    height: String,
  },
  data () {
    return {
      value: Math.random() * 2000,
      data: [],
      begin: this.$dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
      end: this.$dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
      date: '',
    }
  },
  computed: {
    styleObj () {
      return {
        width: '100%',
        height: this.height || '280px'
      }
    },
    chartOption () {
      return {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0];
            const date = new Date(params.name);
            return (
              date.getDate() +
              '/' +
              (date.getMonth() + 1) +
              '/' +
              date.getFullYear() +
              ' : ' +
              params.value[1]
            );
          },
          axisPointer: {
            type: 'cross',
          }
        },
        textStyle: {
          color: '#ffffff'
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.8)'
            }
          },
        },
        grid: {
          right: '100px',
          left: '80px',
          top: '30px',
          bottom: '40px'
        },
        visualMap: {
          show: false,
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 850,
              color: '#93CE07'
            },
            {
              gt: 850,
              lte: 950,
              color: '#FBDB0F'
            },
            {
              gt: 950,
              lte: 1050,
              color: '#FC7D02'
            },
            {
              gt: 1050,
              lte: 1150,
              color: '#FD0100'
            },
            {
              gt: 1150,
              lte: 1250,
              color: '#AA069F'
            },
            {
              gt: 1250,
              color: '#AC3B2A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: [
          {
            type: 'line',
            symbol: 'circle',
            smooth: true,
            symbolSize: 10,
            showSymbol: false,
            markLine: {
              silent: true,
              animation: false,
              label: {
                color: '#fff'
              },
              lineStyle: {
                color: 'rgb(133,237,165)'
              },
              data: [
                {
                  yAxis: 850
                },
                {
                  yAxis: 950
                },
                {
                  yAxis: 1050
                },
                {
                  yAxis: 1150
                },
                {
                  yAxis: 1250
                }
              ]
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1, color: 'rgba(36,135,220,0.1)'
                }, {
                  offset: 0, color: 'rgba(36,135,220,1)'
                }],
              },
            },
            data: this.data
          }
        ]
      }
    },
  },
  mounted () {
    this.initData()
    this.timer = setInterval(() => {
      this.start()
    }, 1e3)
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    eventBusHandler () {
      this.timer && clearInterval(this.timer)
      this.value = Math.random() * 2000
      this.initData();
      this.timer = setInterval(() => {
        this.start()
      }, 1e3)
    },
    initData () {
      let length = 300
      const oneDay = 24 * 3600 * 1000
      let now = new Date(this.begin).getTime()
      const data = []
      while (length--) {
        now += oneDay
        data.push({
          name: new Date(now).toString(),
          value: [
            this.$dayjs(now).format('YYYY-MM-DD'),
            this.rand()
          ]
        })
      }
      this.date = now
      this.data = data
    },
    rand () {
      let value = this.value
      value = value + Math.random() * 200 - 100
      this.value = value
      return Math.abs(Math.round(value))
    },
    start () {
      const data = this.data
      const oneDay = 24 * 3600 * 1000
      let now = this.date
      now += oneDay

      if (now > new Date(this.end)) {
        this.value = Math.random() * 2000
        this.initData()
        return
      }
      this.date = now

      data.shift()
      data.push({
        name: new Date(now).toString(),
        value: [
          this.$dayjs(now).format('YYYY-MM-DD'),
          this.rand()
        ]
      })
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon v-if="showIcon" class="item-icon" name="product"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">{{title}}</h3>
        <p class="secondary-title" v-if="showSecondaryTitle">Real-time data viewing</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content no-padding" ref="container">
        <v-chart ref="chart" :option="chartOption" :style="styleObj"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
